<template>
	<view>
		<u-card :title="title" :sub-title="subTitle" >
				<view class="" slot="body">
					<view class="">
				       <span>司机姓名：</span> 
					   <span style='float: right;'>{{moodForm.driverName}}</span>
					</view>
					<u-line color="black" />
					<view class="">
					  <span>车牌号：</span>
					    <span style='float: right;'>{{carCode}}</span>
					</view>
					<u-line color="black"/>
					<view class="">
					  <span>司机电话：</span>
					    <span style='float: right;'>{{moodForm.driverCode}}</span>
					</view>
					<u-line color="black" />
				</view>
				<view class="" slot="foot">
					<view style="float: right;">
						<u-icon name="rmb" color="red" size="24"></u-icon>
						预支付费用:<span style="color: red;">{{moodForm.freightAmount}}</span>
					</view>
				</view>
			</u-card>
			<template>
				<view class="" style="width: 100%;">
					<u-popup v-model="show" mode="bottom">
					<u-form :model="moodForm" ref="uForm" class="form">
					<u-form-item label-position="left" label="送货标题" label-width="150"><u-input v-model="moodForm.orderName" /></u-form-item>
					<u-form-item label-position="left" label="发货人姓名" label-width="150"><u-input v-model="moodForm.customerName" /></u-form-item>
					<u-form-item label-position="left" label="发货人电话" label-width="150"><u-input v-model="moodForm.customerTel" /></u-form-item>
						<u-form-item label-position="left" label="收货人姓名" label-width="150"><u-input v-model="moodForm.consigneeName" /></u-form-item>
						<u-form-item label-position="left" label="收货人电话" label-width="150"><u-input v-model="moodForm.consigneeTel" /></u-form-item>
						<u-form-item label-position="left" label="货物重量" label-width="150"><u-input v-model="moodForm.goodsWeight" /></u-form-item>
					<u-form-item label-position="left" label="货物名称" label-width="150"><u-input v-model="moodForm.goodsName" /></u-form-item>
					<u-form-item label-position="left" label="备注" label-width="150"><u-input v-model="moodForm.orderRemarks" /></u-form-item>
					<u-form-item label-position="left" label="货物类型" prop="moodType" label-width="150">
						<u-input border="border" type="select" :select-open="selectShow" v-model="moodForm.moodType"
							placeholder="请选择获取类型" @click="selectShow = true">
						</u-input>
					</u-form-item>
					<u-button type="default" shape="circle" size="mini" @click="show = false">取消确认</u-button>
						<u-button type="success" shape="circle" size="mini" @click="show=false">确认信息</u-button>
					</u-form>				
					</u-popup>
					<u-cell-group>
							<u-cell-item  @click="show = true" icon="setting-fill" title="填写送货信息"></u-cell-item>
					</u-cell-group>	
				</view>
			</template>
		<u-form :model="moodForm" ref="uForm" >
			<u-form-item label-position="left" label="上货地址" label-width="150"><text style="width: 100%;"  @click="showMapHandel(0)">{{moodForm.fromText}}</text></u-form-item>
			<u-form-item   label-position="left" label="目的地址" label-width="150"><text style="width: 100%;"   @click="showMapHandel(1)">{{moodForm.toText}}</text></u-form-item>
		</u-form>
		<u-select mode="single-column"
										:list="moodTypeList"
										v-model="selectShow"
										@confirm="selectConfirm"
										value-name="typeId"
										label-name="typeName"
					></u-select>
		<u-button type="error"
							shape="circle"
							size="medium"
							:plain="true"
							width="50"
							style="position: absolute;right:5px;bottom:5px;"
							@click="confirmFindOrder"
		>
			确认订单</u-button>
		<mi-map v-if="showMap" @seladdress="seladdress"></mi-map>
	</view>
</template>

<script>
	import miMap from '@/components/user-map/mi-map.vue'
	import {getMoodTypeList} from '@/api/user/user.js'
	import {getDriverVehicleInfoByDriverName} from '@/api/user/user.js'
	import {findOrder, gerMoney, gerPublishById} from "../../../api/user/user";
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
			  	showMap:false,
			    addressType:0,
				  id:0,
				  carCode:'',
					moodTypeList: [],
					selectShow:false,
				  moodForm:{
					orderDistance:'',
						orderCode:1,
				  orderId:0,
					goodsName:'测试货物',
					typeId:null,
					goodsWeight:12,
					orderRemarks:null,
					carId:null,
					typeName:'',
					//货物类型
					moodType:'',
					//货物类型id
					goodsId:'',
					//上货地址
					fromText:'定位发货地址',
			 	    latitude:1.12,
					longitude:2.12,
					toText:'定位收货地址',
					//发货人
					customerName:'',
					//发货人联系方式
					customerTel:'',
					//收货人
					consigneeName:'',
					//收货人联系方式
					consigneeTel:'',
					//送货标题：
					orderName:'订单测试',
						freightAmount:""
				},
				show:false,
                 title:'找单标题',
				 subTitle: '2020-05-15',
				
			}
		},
		computed:{
			...mapGetters([
				'userID',
				'name',
				'phone'
			])
		},
		created() {
			this.moodForm.customerTel = this.phone
			this.moodForm.consigneeTel = this.phone
			this.moodForm.customerName = this.name
			this.moodForm.consigneeName = this.name
			this.moodForm.orderName = this.name + '的订单'
		},
		components:{
			miMap
		},
		onLoad(e) {
			this.id=e.id;
			this.moodForm.userId=this.userID;
			this.getTypeList()
			this.getDetail()
		},
		methods: {
			seladdress(e){
				console.log(e);
				this.showMap=false
				if (this.addressType==0) {
					console.log('1');
					this.moodForm.fromText=e.address
					this.moodForm.fromLatitude=e.latitude
					this.moodForm.fromLongitude=e.longitude
				}else{
					console.log('0');
					this.moodForm.toText=e.address
					this.moodForm.toLatitude=e.toLatitude
					this.moodForm.toLongitude=e.toLongitude
				}
			},
			showLoading: function() {
				uni.showLoading({
					title: 'loading'
				}); },

			hideLoading: function() {
				uni.hideLoading();
			},
			//确认订单
			confirmFindOrder(){
				if(this.moodForm.userId==''){
					uni.showToast({
						icon: 'none',
						title: '请先去登录',
						duration: 2000});
					return;
				}
				this.getDistance();
				this.showLoading();
				findOrder(this.moodForm).then(res=>{
					console.log(res)
					if(res.header.code==200){
						uni.showToast({
							icon: 'success',
							title: res.body,
							duration: 2000});
							this.getTypeList()
							this.getDetail()
					}
					if(res.header.code=500){
						uni.showToast({
							icon: 'error',
							title: res.body,
							duration: 2000});
					}
					this.hideLoading();
				});
			},
			getDistance(longitude1, latitude1, longitude2, latitude2){
				// 维度
				const lat1 = (Math.PI / 180) * latitude1;
				const lat2 = (Math.PI / 180) * latitude2;
				// 经度
				const lon1 = (Math.PI / 180) * longitude1;
				const lon2 = (Math.PI / 180) * longitude2;
				// 地球半径
				const R = 6371;
				// 两点间距离 km，如果想要米的话，结果*1000就可以了
				const d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;
				const away=d*1000;
				this.moodForm.orderDistance=away;
			},
			//计算价格
			// getMoney(){
			// 	let param={
			// 		"orderDistance":this.moodForm.orderDistance,
			// 		"carId":this.moodForm.carId
			// 	};
			// 	gerMoney(param).then(res=>{
			// 		this.moodForm.freightAmount=res.body;
			// 		console.log(res)
			// 	});
			// } ,
			showMapHandel(type){
				this.addressType=type
				this.showMap=true
			},
				getTypeList(){
							getMoodTypeList().then(res=>{
								this.moodTypeList=res.body;
							})
						},
				selectConfirm(e) {
							console.log(e)
							this.moodForm.moodType = '';
							e.map((val, index) => {
								this.moodForm.moodType += this.moodForm.moodType == '' ? val.label : '-' + val.label;
								//保存货物id信息
								this.moodForm.typeName = val.label;
								this.moodForm.typeId=val.value;
							})
						},
			getDetail(){
				gerPublishById(this.id).then(res=>{
					this.moodForm.orderCode=res.body.orderCode;
					this.moodForm.orderId=res.body.id;
				 this.title=res.body.orderTitle;
				 this.subTitle=res.body.modifyDate;
				 this.moodForm.driverName=res.body.driverName;
				 this.moodForm.driverCode=res.body.driverTel;
				 this.moodForm.freightAmount=res.body.exception;
				 this.carCode=res.body.carCode;
				})
			}
		}
	}
</script>

<style>

</style>
